<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    v-if="!headerBarFixed"
    :class="[
      fixedHeader && 'ant-header-fixedHeader',
      sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',
    ]"
    :style="{ padding: '0' }"
  >
    <div v-if="mode === 'sidemenu'" :class="theme" class="header">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggle" />
      <user-menu :theme="theme" />
    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide flex align-center">
        <div class="header-left flex">
          <div class="img-wrap flex align-center justify-center">
            <img alt="" src="@/assets/logo.png" />
          </div>
          <span class="platform">{{ projectName }}</span>
        </div>
        <div class="menu-wrap" style="flex: 1; width: 0">
          <s-menu
            :menu="menus"
            :theme="theme"
            class="f1 flex justify-around"
            mode="horizontal"
            @updateMenuTitle="handleUpdateMenuTitle"
          ></s-menu>
        </div>
        <div class="header-right flex justify-between hander-warp">
          <svg
            v-if="themeType === 'theme1'"
            aria-hidden="true"
            class="iconify iconify--material-symbols"
            height="1em"
            role="img"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            @click="switchTheme('theme2')"
          >
            <path
              d="M14 22q-2.075 0-3.9-.788t-3.175-2.137T4.788 15.9T4 12t.788-3.9t2.137-3.175T10.1 2.788T14 2q.875 0 1.75.175t1.675.525q.3.125.45.387t.15.538q0 .225-.088.425t-.287.35q-1.75 1.375-2.7 3.375T14 12q0 2.25.925 4.25t2.7 3.35q.2.15.288.363T18 20.4q0 .275-.15.538t-.45.387q-.8.35-1.662.513T14 22"
              fill="currentColor"
            ></path>
          </svg>
          <svg
            v-if="themeType === 'theme2'"
            aria-hidden="true"
            class="iconify iconify--material-symbols"
            height="1em"
            role="img"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            @click="switchTheme('theme1')"
          >
            <path
              d="M6.9 17h1.9l1-2.8h4.4l1 2.8h1.9L13 6h-2zm3.45-4.4l1.6-4.55h.1l1.6 4.55zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
              fill="currentColor"
            ></path>
          </svg>
          <div :title="userMessage.policeAgencyName" class="img-wrap line-hidden">
            <img alt="" src="@/assets/public-security.png" />
            当前：{{ userMessage.policeAgencyName }}
          </div>
          <div class="img-wrap line-hidden">
            <img
              :src="`${userMessage.avatar ? `${imgPrefix + userMessage.avatar}` : '@/assets/person.png'}`"
              alt=""
              style="border-radius: 50%"
            />
            {{ userMessage.username }}
          </div>
          <div class="img-wrap cursor line-hidden" @click="handleLogout">
            <img alt="" src="@/assets/exit.png" style="margin-right: 8px" />
            退出
          </div>
        </div>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import { findEnableDictItemsbyCode } from '@/api/api'
import { mixin } from '@/utils/mixin.js'
import { mapActions } from 'vuex'
import moment from 'moment'
export default {
  name: 'GlobalHeader',
  components: {
    SMenu,
    Logo,
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      default: 'sidemenu',
    },
    menus: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    device: {
      type: String,
      required: false,
      default: 'desktop',
    },
  },
  data() {
    return {
      headerBarFixed: false,
      topMenuStyle: {
        headerIndexLeft: {},
        topSmenuStyle: {},
      },
      userMessage: {},
      imgPrefix: '',
      themeType: 'theme1',
      projectName: process.env.VUE_APP_PROJECT_NAME,
    }
  },
  watch: {
    $route(newValue, oldValue) {
      if (newValue.path == '/dashboard/analysis') {
        if (this.websock1) {
          this.websock1.close()
        }
      } else {
        // this.initWebSocket()
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.userMessage = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value

    findEnableDictItemsbyCode({ code: 'static_server' }).then((res) => {
      this.imgPrefix = res.result[0].value
    })
  },
  methods: {
    moment,
    ...mapActions(['Logout']),
    handleScroll() {
      if (this.autoHideHeader) {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > 100) {
          this.headerBarFixed = true
        } else {
          this.headerBarFixed = false
        }
      } else {
        this.headerBarFixed = false
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确定要退出登录吗 ?',
        onOk() {
          console.log('退出登录')
          return that
            .Logout({})
            .then(() => {
              that.$router.push({ path: '/user/login' })
              window.location.reload()
            })
            .catch((err) => {
              that.$message.error({
                title: '错误',
                description: err.message,
              })
            })
        },
        onCancel() {},
      })
    },
    handleUpdateMenuTitle(value) {
      this.$emit('updateMenuTitle', value)
    },
    switchTheme(theme) {
      this.themeType = theme
      const Themes = {
        theme1: {
          '--theme-content-bg': '#083985', // 内容区域背景颜色

          //  容器背景颜色
          '--theme-container-bg': '#06409a', // tab

          // input tab select pagination
          '--theme-input-border': '#0855cc', // 输入框边框颜色
          '--theme-input-bg': '#0646ac', // 输入框边框颜色
          '--theme-input-color': '#fff', // 输入框边框颜色

          // 提示框文字颜色
          '--theme-placeholder-color': '#6ea7ff', // 提示文字颜色

          // 选择框样式

          // 搜索区域
          '--theme-search-label-text-color': '#8fbbff', // label

          // tab
          '--theme-tab-active-bg': '#1970f6', // tab tree
          '--theme-tab-active-text-color': '#fff',
          '--theme-tab-text-color': '#8fbbff', // tab tree

          // table
          '--theme-header-th-bg': '#0446ac',
          '--theme-odd-bg': '#0a53c4',
          '--theme-even-bg': '#0946a8',
          '--theme-table-text-color': '#fff',

          '--theme-tree-selected-color': '#fff',

          // reset btn
          '--theme-reset-btn-bg': 'rgba(25, 112, 246, 0.42)',
          '--theme-reset-btn-color': '#4093ff',
          '--theme-reset-btn-border': '#1e63c4',

          // search btn
          '--theme-search-btn-bg': '#1970f6',

          // 头部
          '--theme-header-bg': '#06409A',
          '--theme-header-border-width': '1px',

          //弹窗头部
          '--theme-modal-header-bg': '#0A53C4',
          '--theme-modal-label-bg': '#094CB5',
          '--theme-modal-label-value-color': '#fff',

          // 普通按钮颜色
          '--theme-normal-button-color': '#34FF0F',
          '--theme-normal-button-delete-color': '#F98500',

          // 内容背景颜色 公文管理 item 项 背景颜色
          '--theme-content-item-bg': '#0946A8',
        },
        theme2: {
          '--theme-content-bg': '#0E2B48', // 内容区域背景颜色

          //  容器背景颜色
          '--theme-container-bg': '#0B3763', // tab

          // input tab select pagination
          '--theme-input-border': '#0D4D8B', // 输入框边框颜色
          '--theme-input-bg': 'rgba(12,63,115,0.502)', // 输入框边框颜色
          '--theme-input-color': '#80b5eb', // 输入框边框颜色

          // 提示框文字颜色
          '--theme-placeholder-color': '#317BC8', // 提示文字颜色

          // 选择框样式

          // 搜索区域
          '--theme-search-label-text-color': '#509EEE', // label

          // tab
          '--theme-tab-active-bg': '#1388FF', // tab tree
          '--theme-tab-active-text-color': '#0E2B48',
          '--theme-tab-text-color': '#509EEE', // tab tree

          // table
          '--theme-header-th-bg': '#0C3A68',
          '--theme-odd-bg': '#0C3F73',
          '--theme-even-bg': '#0B3C6E',
          '--theme-table-text-color': '#509EEE',

          '--theme-tree-selected-color': '#0D467E',

          // reset btn
          '--theme-reset-btn-bg': '#115398',
          '--theme-reset-btn-color': '#509EEE',
          '--theme-reset-btn-border': '#0D4D8B',

          // search btn
          '--theme-search-btn-bg': '#1388FF',

          '--theme-header-bg': '#113458',
          '--theme-header-border-width': '0',

          '--theme-modal-header-bg': '#104C8A',
          '--theme-modal-label-bg': '#0C4681',
          '--theme-modal-label-value-color': '#80B5EB',

          // 普通按钮颜色
          '--theme-normal-button-color': '#34FF0F',
          '--theme-normal-button-delete-color': '#F98500',

          // 内容背景颜色 公文管理 item 项 背景颜色
          '--theme-content-item-bg': '#0b3f73',
        },
      }

      const currentTheme = Themes[theme]

      const varStyleSheet = [...document.styleSheets].find((item) => item.ownerNode.id === 'css-var')

      Object.keys(currentTheme).forEach((key) => {
        varStyleSheet.cssRules[0].style.setProperty(key, currentTheme[key])
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-menu-horizontal > .ant-menu-item {
  border-bottom: none;
}

/deep/ .ant-menu-horizontal > .ant-menu-item:hover,
/deep/ .ant-menu-horizontal > .ant-menu-submenu:hover,
/deep/ .ant-menu-horizontal > .ant-menu-submenu-selected {
  border-bottom: none;
  // color: #0ae0fd;
}
</style>

<style lang="less">
@height: 0.56rem;
.cursor {
  cursor: pointer;
}

.ant-layout-header {
  height: 80px !important;
  background: var(--theme-header-bg) !important;
}

// ! sider-menu-mode

// .header {
//   z-index: 2;
//   color: white;
//   height: @height;
//   background-color: @primary-color;
//   transition: background 300ms;
//   padding: 0 12px 0 0;
//   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//   position: relative;
//   .trigger {
//     font-size: 22px;
//     line-height: 42px;
//     padding: 0 18px;
//     cursor: pointer;
//     transition: color 300ms, background 300ms;
//     &:hover {
//       background: rgba(255, 255, 255, 0.3);
//     }
//   }
// }

// ! top-menu-mode
.top-nav-header-index {
  height: 80px;
  padding: 0.1rem;

  .header-index-wide {
    height: 60px;
    display: flex;
    color: var(--theme-modal-label-value-color);
    background: var(--theme-header-bg);
    width: 100%;
  }
  .header-left {
    width: 4.9rem;
    margin: 6px 12px 0 10px;
    flex-shrink: 0;
    .img-wrap {
      width: 0.8rem;
      height: 54px;
      background: var(--theme-header-bg);
      border-bottom: 2px solid #1388ff;
      img {
        // width: 0.5rem;
        // height: 40px;
        width: 0.5rem;
        height: 50px;
      }
    }

    .platform {
      flex: 1;
      height: 54px;
      line-height: 54px;
      text-align: center;
      font-size: 0.28rem;
      font-weight: bold;
      color: var(--theme-modal-label-value-color);
      background: var(--theme-header-bg);
      border-bottom: 2px solid #0d4580;
      font-family: PingFang SC-Bold, PingFang SC;
    }
  }

  .header-right {
    width: 4.2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    .iconify {
      cursor: pointer;
    }

    font-size: 0.14rem;
    img {
      width: 0.4rem;
      height: 0.4rem;

      &:first-child {
        margin-right: 7px;
      }
    }
  }

  .hander-warp {
    padding-right: 10px;
    div:nth-child(1) {
      max-width: 1.8rem;
    }

    div:nth-child(2) {
      max-width: 1.5rem;
    }
  }

  .ant-menu {
    height: 100%;
    border: none;
    background: transparent;
    .ant-menu-item {
      height: 0.4rem;
      line-height: 0.4rem;
      padding: 0 0.1rem;
      a {
        position: relative;
        top: 0;
        left: 0;
        font-size: 0.16rem;
        font-weight: bold;
        font-family: PingFang SC;
        color: #a2d0fe;
        height: 100%;
        line-height: 0.4rem;
        padding: 0 0.2rem;
        background: url('~@/assets/imgs/menu-icon.png') no-repeat;
        background-size: 100% 100%;
        border: var(--theme-header-border-width) solid var(--theme-input-border);
      }
      a:hover {
        color: #fff;
      }
    }
    .ant-menu-item-selected,
    .ant-menu-item-active {
      a {
        font-size: 0.16rem;
        font-weight: bold;
        color: #a2d0fe;
        background: url('~@/assets/imgs/menu-active.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .ant-menu-submenu {
      border: none;
      padding-right: 0.1rem;
      .ant-menu-submenu-title {
        color: #a2d0fe;
        font-size: 0.16rem;
        font-weight: bold;
        font-family: PingFang SC;
        background: url('~@/assets/imgs/menu-icon.png') no-repeat;
        background-size: 100% 100%;
        height: 0.4rem;
        line-height: 0.4rem;
        border: var(--theme-header-border-width) solid var(--theme-input-border);
      }
    }
    .ant-menu-submenu-title:hover .ant-menu-submenu-title,
    .ant-menu-submenu-active .ant-menu-submenu-title,
    .ant-menu-submenu-selected .ant-menu-submenu-title {
      border: none;
      background: url('~@/assets/imgs/menu-active.png') no-repeat;
      background-size: 100% 100%;
      font-size: 0.16rem;
      font-weight: bold;
      color: #a2d0fe;
    }
  }
}

.ant-menu-submenu-popup {
  border-radius: 0.06rem;

  .ant-menu {
    border-radius: 0.06rem;
    background: var(--theme-container-bg);
    // box-shadow: 0 0 0.2rem rgba(0, 204, 255, 0.7) inset;
    .ant-menu-item {
      margin: 0;
      text-align: center;
      padding: 0 0.16rem;
      border-bottom: 1px solid rgba(8, 68, 127, 0.2);

      a {
        width: 100%;
        height: 100%;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #a2d0fe;
      }
    }

    .ant-menu-item:last-child {
      border-radius: 0.06rem;
      a {
        border-bottom: none;
      }
    }

    .ant-menu-item:hover {
      background: #1388ff;
      a:hover {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #a2d0fe;
      }
    }

    .ant-menu-item-selected {
      background: #1388ff;

      a {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #a2d0fe;
      }
    }

    // .ant-menu-submenu {
    //   padding: 0 0.16rem;

    //   .ant-menu-submenu-title {
    //     text-align: center;
    //     font-size: 0.16rem;
    //     font-family: PingFang SC;
    //     font-weight: 500;
    //     color: rgba(0, 204, 255, 0.7);
    //     padding: 0;
    //     border-bottom: 1px solid rgba(0, 204, 255, 0.2);

    //     .ant-menu-submenu-arrow::before,
    //     .ant-menu-submenu-arrow::after {
    //       background: rgba(0, 204, 255, 0.7);
    //     }
    //   }
    // }

    // .ant-menu-submenu-active {
    //   background: linear-gradient(
    //     90deg,
    //     rgba(5, 61, 81, 0.6) 0%,
    //     rgba(5, 61, 81, 0.6) 0%,
    //     rgba(0, 204, 255, 0.6) 49%,
    //     rgba(5, 61, 81, 0.6) 100%
    //   );

    //   .ant-menu-submenu-arrow::before,
    //   .ant-menu-submenu-arrow::after {
    //     background: #00ccff;
    //   }
    // }
  }
}
</style>
